<!--
 * @description  : 市管-关联专项行动列表展示组件
 * @descriptionDetail: 市管-关联专项行动列表展示组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view>
    <u-row gutter="16">
      <u-col span="9">
        <view class="title">
          <u-icon :label="action.actionName" size="30" :color="$theme.u_type_primary" name="tags-fill"></u-icon>
        </view>
      </u-col>
      <u-col span="3"> 
        <view :class="'status status-' + action.status">
          {{ action.statusText }}
        </view>
      </u-col>
      <u-col span="12">
        <view class="sub-title address">
          {{ action.orgName || '' }}({{ action.operator }})
        </view>
      </u-col>
      <u-col span="12">
        <view class="sub-title address">
          {{ action.startDate || '' }} 至 {{ action.endDate || '' }}
        </view>
      </u-col>
    </u-row>
  </view>
</template>
<script>
import checkService from "@/service/check/check.service";
import {dateUtils,} from "@/common/util";
import {M_PLAN_STATUS,M_COMMON_CHECK_STATUS,} from "@/service/check/mapping/enum.js";
export default {
  name: "ActionItem",
  props: {
    action: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      M_PLAN_STATUS,
      M_COMMON_CHECK_STATUS,
    }
  },
  watch: {
    action: {
      immediate: true,
      handler() {
        this.$forceUpdate();
      },
    },
  },
  mounted(){
   
  },
  methods: {
    
  },
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 15px;
  color: #666;
  font-weight: 600;
  margin: 5px 10px;
}
.sub-title {
  color: #666;
  margin: 3px 4px;
}
.address{
  padding-left: 4px;
}
.status {
    padding: 2px;
    width: 112rpx;
	height: 56rpx;
	line-height: 48rpx;
    text-align: center;
    border-radius: 28rpx;
    float: right;
    font-size: 24rpx;
  }
  // 草稿-灰色
  .status-00 {
    color: #717579;
	background: #EDEEEF;
  }
  // 已发布-蓝色
  .status-01 {
    color: #0079F2;
    background: #E0ECFF;
  }
  // 已评估-绿色
  .status-02 {
	color: #20AB5C;
	background: #DBF4E6;
  }
  // 已申报 - 绿色
  .status-03 {
	color: #20AB5C;
	background: #DBF4E6;
  }
  // 评审中 -
  .status-04 {
	color: #FF9E2C;
	background: #FFF3E6;
  }
  // 待归档 -
  .status-05 {
	color: #EC7C37;
	background: #FBE2D3;
  }
  // 已归档 -
  .status-06 {
	color: #01A79A;
	background: #C0ECE2;
  }
</style>